<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.js"></script>
    <style>
        #map {
            width: 800px;
            height: 600px
        }
    </style>

</head>
<body>

<div id="map"></div>
<script type="text/javascript">
    chars = echarts.init(document.getElementById("map"));
    var option = {
        title: {
            text: "我的第一个图表"
        },
        xAxis: {
            data: ["男生人数", "女生人数", "其他人数"]
        },
        yAxis: {},
        series: [{
            data: [25, 52, 5],
            type: "bar",
            name: "人数"
        }]
    };

    let option2 = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
                data: [10, 22, 28, 43, 49],
                type: 'bar',
                stack: 'x'
            },
            {
                data: [5, 4, 3, 5, 10],
                type: 'bar',
                stack: 'x'
            }, {
                data: [6, 8, 9, 4, 101],
                type: 'bar',
                stack: 'x'
            }
        ]
    };
    chars.setOption(option2);
</script>


</body>
</html>